<template>
  <div class="clue_allot_page">
    <div class="tab">
      <Tabs type="card" v-model="showTab" :animated="false" @on-click="tabClickFun">
        <TabPane :label="label1" name="2"></TabPane>
        <TabPane :label="label2" name="1" v-if="privacyFlag"></TabPane>
      </Tabs>
    </div>
    <div>
      <top-count :customerType="2" :topCountData="topCountData" @countChange="countChange" />
      <div class="tips" v-if="showTab == '2'">
        <Icon type="ios-alert" size="24" color="#2d8cf0" />
        请选择需分出的客户（注意：如果将客户分配给非“顾问”角色人员，则分配后无法发起认购或签约
      </div>

      <div class="tips" v-if="showTab == '1'">
        <Icon type="ios-alert" size="24" color="#2d8cf0" />
        请选择需分出的客户（注意：“隐私号客户”只可分配给承接人。
        <Tooltip content="“承接人”指已配置虚拟号的顾问" placement="top">
          <span>什么是“承接人”？</span>
        </Tooltip>
        ）
      </div>
    </div>
    <div class="privaClass flex flex-direction-row flex-horizontal-end">
      <span>已选{{ customerChoosedLength }}组，共{{ page.total }}组客户</span>
      <Button type="primary" @click="onAllot">分出已选客户</Button>
      <Button type="error" @click="onAllotAll" v-if="unlocking('0101010201')">分出全部客户</Button>
      <Button type="primary" @click="assignClueCustomersRecord">分配记录</Button>
    </div>
    <dt-grid
      ref="table"
      :select="select"
      :columns="columns"
      :page="page"
      :onFetch="onFetch"
      :cell-height="80" />

    <allot-modal ref="allot" @assignSuccess="assignSuccess" />
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
  </div>
</template>

<script>
  import allotColumnOpt from './opt/allotColumn'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import customerOptMgr from '@/biz/customer/customerOpt.js'
  import allotModal from './components/allot-modal.vue'
  import topCount from '../components/topCount.vue'
  import userMgr from '@/biz/user'
  import customerMgr from '@/biz/customer/customer'
  export default {
    components: {
      allotModal,
      topCount
    },
    data() {
      return {
        topCountData: null,
        showTab: '2',
        privacyFlag: false, //隐私号是否展示
        topKey: null,
        topNum: null,

        columns: [],
        userCustomerId: [],
        customerChoosedLength: 0,
        select: {
          change: (e) => {
            this.tableChange(e)
          }
        },
        label1: '到访客户',
        label2: '隐私号客户',
        page: {
          total: 0,
          current: 1
        },

        showIndex: 0,
        preViewImg: [],
        userMess: userMgr.info(),
        params: null
      }
    },
    created() {
      // this.isPrivacy()
    },
    async mounted() {
      //代办任务跳转线索分配
      this.showTab = this.$route.params.isMaskPhone == 1 ? '1' : '2'
      await this.getColumns()
      clueCustomerMgr.getConsultant()
      clueCustomerMgr.getFilterOptions()
      clueCustomerMgr.getChannel()
      clueCustomerMgr.getArea()

      this.isPrivacy().then((res) => {
        this.$refs.table.init(this)
        this.count()
      })

      // this.$refs.table.fetch()
    },
    methods: {
      countChange(val) {
        this.topKey = val.params
        this.topNum = val.num

        // setTimeout(()=>{
        this.$refs.table.fetch()
        // },500)
      },
      count() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          privacy: this.showTab,
          roleId: userMgr.info().role.roleId,
          userId: this.userMess.userId,
          ...this.params
        }
        return clueCustomerMgr.customerListAssignmentCount(params).then((res) => {
          console.log(res, '到访统计')
          this.topCountData = res
        })
      },
      //是否含有隐私号
      isPrivacy() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          privacy: 1,
          current: 1,
          rows: 50,
          roleId: userMgr.info().role.roleId,
          userId: this.userMess.userId
        }
        return customerMgr.getCustomerListNew(params).then((res) => {
          if (res.total > 0) {
            this.privacyFlag = true
            if (this.$route.query.fromKey == 'privacyPhoneCustomer') {
              this.showTab = '1'
            }
          } else {
            this.privacyFlag = false
            this.showTab = '2'
          }
        })
      },
      //获取表头
      getColumns() {
        return customerOptMgr.columns().then((res) => {
          console.log(res, '我是到访客户表头')
          if (res) {
            this.columns = allotColumnOpt.options(this, res.resArr, 'chooseBox')
          }
        })
      },

      onFetch(data) {
        this.customerChoosedLength = 0
        this.params = data
        this.params.roleId = userMgr.info().role.roleId
        this.params.userId = this.userMess.userId
        this.params.buildingId = this.$dt.buildInfo().housesId
        this.params.privacy = Number(this.showTab)
        this.params.classify = Number(this.topNum)
        this.count()
        return customerMgr.getCustomerListNew(this.params).then((res) => {
          res.records &&
            res.records.forEach((item) => {
              if (item.featurePhoto) {
                item.featurePhoto = item.featurePhoto.split(',')
              } else {
                item.featurePhoto = []
              }
            })
          this.page.total = res.total
          return res.records
        })
      },
      privateChange(val) {
        this.$refs.table.fetch()
      },
      tabClickFun(val) {
        this.userCustomerId = []
        this.customerChoosedLength = 0

        this.$refs.table.clearFilter()
        this.$refs.table.fetch(true)
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      },
      tableChange(val) {
        this.userCustomerId = []
        if (val && val.length) {
          this.customerChoosedLength = val.length
          val.forEach((item) => {
            if (item.customerId) {
              this.userCustomerId.push(Number(item.customerId))
            }
          })
        } else {
          this.userCustomerId = []
          this.customerChoosedLength = 0
        }
      },
      assignClueCustomersRecord() {
        this.$router.push({
          path: '/allCustomersManagement/assignVisitRecord'
        })
      },

      // 分配线索
      onAllotAll() {
        if (this.page.total < 1) {
          this.$Message.error('没有可分配的线索客户')
          return false
        }
        this.$Modal.confirm({
          title: '分配客户确认',
          content: `您将<span style='color:red;'>分出列表中所有到访客户，共${this.page.total}组</span>。请确认是否继续该操作？`,
          closable: true,
          onOk: () => {
            let obj1 = {
              total: this.page.total,
              showTab: this.showTab,
              source: 2,
              assignAll: true,
              screening: this.params
            }

            this.$refs.allot.show(obj1)
          },
          onCancel: () => {}
        })
      },
      onAllot() {
        if (this.userCustomerId.length < 1) {
          this.$Message.error('请先选择需要分配的线索')
        } else {
          let obj = {
            userCustomerId: this.userCustomerId,
            showTab: this.showTab,
            source: 2,
            assignAll: false,
            screening: null
          }
          this.$refs.allot.show(obj)
        }
      },
      assignSuccess() {
        this.userCustomerId = []
        this.$refs.table.clearFilter()
        this.$refs.table.fetch()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .clue_allot_page {
    padding: 20px;

    .tab {
      position: relative;
    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }

  .tips {
    background: rgba(254, 252, 236, 1);
    display: block;
    width: 700px;
    padding: 5px;

    .ivu-icon-ios-alert:before {
      vertical-align: -2px;
    }

    span {
      cursor: pointer;
      color: #2d8cf0;
      margin-right: 20px;
    }
  }

  .privaClass {
    margin-top: 10px;

    > * {
      margin-left: 10px;
    }

    > span {
      line-height: 30px;
    }

    .btnChenClass {
      width: 120px;
      display: inline-block;
      border: 1px #19be6b solid;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      color: #19be6b;
    }

    .checkClass {
      line-height: 30px;
      width: 100%;
    }
  }
</style>
